<script setup lang="ts">
import { useTemplateRef, onMounted,ref } from 'vue'
// 第一个参数必须与模板中的 ref 值匹配
const input = useTemplateRef('my-input2')

onMounted(() => {
  //input.value.focus()
  input.value.focus()
})


const list = ref([
 "a","b","c"
])

// const  radioValue = ref(1)

// console.log(list.value); //
const itemRefs = useTemplateRef('items')

//onMounted(() => console.log("打印:"+itemRefs.value))

onMounted(() => {
  console.log("打印:", itemRefs.value) // ✅ 正确：直接传入数组
  console.log("打印数组长度:", itemRefs.value.length) // 可以检查数量
  // 如果想看单个元素的详细信息
  itemRefs.value.forEach((el, index) => {
    console.log(`第 ${index + 1} 个元素:`, el) // ✅ 正确：直接传入 DOM 元素
    //注意 这个e1 的 目前是个li元素
  })
})


//技巧一 引用在父一层 例如在 v-for 上不是 items上
//如果在子级上  :ref= `input-${item.id}`  很难收集

</script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>


  <!-- <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul> -->

  <input ref="my-input" />
  <input ref="my-input2" />

  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary" >Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>

    <!-- <el-radio v-model="radioValue" lablel="1" >请选择1</el-radio> -->

  </el-row>
  <el-row class="mb-4">
    <el-link type="success">success</el-link>
  </el-row>



  <el-row class="mb-4">
    <el-text class="mx-1" type="primary">Primary</el-text>
  </el-row>
  <!-- <el-scrollbar max-height="400px">
    <p v-for="item in 10" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar> -->



</template>

<style scoped></style>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
